//使用CommonJS的模块化开发
const {add,mul} = require('./js/mathUtils.js')

console.log(add(20,30));
console.log(mul(20,30))




//使用ES6的模块化开发
import {name,age,height} from "./js/info";

console.log(name)
console.log(age)
console.log(height)



// 3.在入口JS传入依赖CSS文件
require('./css/normal.css')


//4.依赖less文件
require('./css/special.less')
document.writeln('<h2>你好呀，皮卡丘</h2>')


// 5.使用Vue进行开发
//首先导入Vue
import Vue from 'vue'
// import App from './vue/app.js'
//这里的App是封装好的一个组件
import App from './vue/App.vue'
//但是这个时候发现一个问题   webpack不认识这个.vue文件   这个时候就需要引入vue-laoder
//npm install vue-loader vue-template-compiler --save-dev
//vue-loader用于加载vue文件
//vue-template-compiler用于编译Vue代码
// 然后修改webpack.config.js代码
//添加一个匹配规则 {
//                 test: /\.vue$/,
//                 use: ['vue-loader']
//             }
//但是在使用Vue-loader的时候，如果版本大于14.0，需要使用一个VueLoaderPlugin插件
//这个时候在webpack.config.js前面定义const VueLoaderPlugin = require('vue-loader/lib/plugin')
// 然后在module.exports={}，后面添加 plugins:[
//         new VueLoaderPlugin()
//     ]


new Vue({
    //如果同时有el和template   Vue会将自定义的template中的代码替换到el标记的div中    这个时候在html中的div中不需要写任何东西，只需要注明div的id即可
    el:'#app',
    template:`<App></App>`,
    components:{
        App,
    }
})


document.writeln('<button>按钮</button>')